import { useEffect } from 'react'
import { useDispatch, useSelector } from 'react-redux'
import { RootState } from '../store'
import { changeActive, getChannelList } from '../store/actions/channel'

export default function Channel() {
  const dispatch = useDispatch()
  const channel = useSelector((state: RootState) => state.channel)
  useEffect(() => {
    dispatch(getChannelList())
  }, [dispatch])
  return (
    <ul className="catagtory">
      {channel.channelList.map((item) => {
        return (
          <li
            key={item.id}
            className={channel.active === item.id ? 'select' : ''}
            onClick={() => dispatch(changeActive(item.id))}
          >
            {item.name}
          </li>
        )
      })}
    </ul>
  )
}
